<script>
	export default {
		name: 'tablePaging',
		props: {
			tableList: {
				// table 数据
				type: Array,
				default: () => []
			},
			no: {
				type: Boolean,
				default: true
			},
			tableColumn: {
				type: Array,
				default: () => []
			},
			tablePaging: {
				type: [Object, Boolean],
				default: false
			},
			tableTotal: {
				type: Number,
				default: 0
			},
			tableButtons: {
				// table 按钮
				type: Array,
				default: () => []
			},
			tableBtnWidth: {
				// 按钮宽度
				type: Number,
				default: 200
			}
		},
		data() {
			return {
				key: 'value',
				size: 'mini',
				layout: 'total, sizes, prev, pager, next, jumper',
				multipleSelection: []
			}
		},
		methods: {
			handle() {
				console.log(this.tableList)
			},
			handleSelectionChange(rows) {
				this.multipleSelection = rows
			},
			indexMethod(index) {
				const { page, pagesize } = this.tablePaging
				return (page - 1) * pagesize + index + 1
			},
			// 操作的渲染控制
			createslotScope(list) {
				return {
					scopedSlots: {
						default: scope => {
							return list.map(item => {
								if (!item.showType) {
									if (!item.btns) {
										return null
									}
									return null
								}
								if (item.showType == 'btnGroup') {
									return (
										<el-button-group>
											{item.btns.map((btn, index) => {
												return (
													<el-button
														key={index}
														type={btn.type || 'success'}
														size={item.size || 'small'}
														{...{
															attrs: { ...btn }
														}}
														onClick={() => btn.click(scope.row)}
													>
														{btn.name}
													</el-button>
												)
											})}
										</el-button-group>
									)
								} else if (item.showType == 'confirm') {
									return (
										<el-popconfirm
											title={item.title || '这是一段内容确定删除吗？'}
											onOnConfirm={() => item.click(scope)}
										>
											<el-button
												type={item.type || 'primary'}
												size={item.size || 'small'}
												slot="reference"
											>
												{item.name}
											</el-button>
										</el-popconfirm>
									)
								} else {
									return null
								}
							})
						}
					}
				}
			},
			createColumn(list = [], _h) {
				return list.map(e => {
					if (e.children) {
						return this.createColumn(e.children, _h)
					}
				})
			}
		},
		render(h) {
			// const {}
			// 表格树的时候使用 {this.createColumn(item.children, h)}
			return (
				<div class="tablePaging">
					<el-table
						ref="multipleTable"
						onSelection-change={this.handleSelectionChange}
						data={this.tableList}
						border
						width="80%"
					>
						{this.no && (
							<el-table-column type="index" index={this.indexMethod} min-width="100" label="No" />
						)}
						{this.tableColumn.map(item => {
							if (item.type === 'button') {
								// 按钮
								return (
									<el-table-column
										label={item.attrs.label || '操作'}
										{...{
											attrs: item.attrs
										}}
										{...this.createslotScope(item.list)}
									></el-table-column>
								)
							}
							if (item.type === 'selection') {
								// 多选框
								return (
									<el-table-column
										key={item.key}
										width="60"
										align="center"
										type={item.type}
										{...{
											attrs: item.attrs
										}}
									></el-table-column>
								)
							}
							return (
								<el-table-column
									key={item.key}
									{...{
										attrs: item.attrs
									}}
									{...{
										scopedSlots: {
											default: scope => {
												return item.render ? item.render(h, scope) : scope.row[item.key]
											}
										}
									}}
								></el-table-column>
							)
						})}
						{this.tableButtons.length != 0 && (
							<el-table-column
								label="操作"
								width={this.tableBtnWidth}
								{...this.createslotScope(this.tableButtons)}
							></el-table-column>
						)}
					</el-table>

					{this.tablePaging && this.tableList.length !== 0 && (
						<div class="footer">
							<el-pagination
								background
								total={this.tableTotal || 0}
								current-page={this.tablePaging.page || 1}
								page-size={this.tablePaging.pagesize || 10}
								page-sizes={this.tablePaging.pagesizes || [5, 10, 20, 30]}
								layout={this.tablePaging.layout || this.layout}
								onSize-change={e => {
									this.$emit('handleSizeChange', e)
								}}
								onCurrent-change={e => {
									this.$emit('handleCrurentChange', e)
								}}
							/>
						</div>
					)}
				</div>
			)
		}
	}
	// page-size={[5, 10, 20]}
	// onCurrent-change={}
	// {this.createColumn(item.children, h)}
	// {...this.createslotScope(this.tableButtons)}
</script>

<style lang="scss" scoped>
	.tablePaging {
		margin: 0 auto;
		.footer {
			padding: 10px 0;
			text-align: right;
		}
	}
</style>
